<template>
  <div>
    <!-- 引入二级路由 -->
    <router-view></router-view>
    <!-- 底部导航 -->
    <van-tabbar
      route
      fixed
      v-model="selected"
      active-color="#C5D700"
      inactive-color="#A0A4A7"
      style="z-index:7"
    >
      <van-tabbar-item
        to="/home/index"
        :icon="
          require(`../assets/imgs/tabBar/${
            selected == 'index' ? 'index_selected' : 'index'
          }.png`)
        "
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        to="/home/products"
        :icon="
          require(`../assets/imgs/tabBar/${
            selected == 'products' ? 'drink_selected' : 'drink'
          }.png`)
        "
        >点餐</van-tabbar-item
      >
      <van-tabbar-item
        to="/home/orders"
        :icon="
          require(`../assets/imgs/tabBar/${
            selected == 'orders' ? 'take_selected' : 'take'
          }.png`)
        "
        >订单</van-tabbar-item
      >
      <van-tabbar-item
        to="/home/me"
        :icon="
          require(`../assets/imgs/tabBar/${
            selected == 'me' ? 'mine_selected' : 'mine'
          }.png`)
        "
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: this.$route.path.split("/").pop(),
    };
  },
  watch: {
    $route(newValue, oldValue) {
      console.log("路由的变化", newValue);
      this.selected = newValue.path.split("/").pop();
    },
    selected(newValue) {
      console.log("selected", this.selected);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>